<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

interface IProps{
    menus:any
}
const props = defineProps<IProps>();
</script>

<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
        text-color="#fff" router>
        <template v-for="item in props.menus" :key="item.id">
            <el-sub-menu v-if="item.children" :index="item.id">
                <template #title>
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item v-for="childItem in item.children" :index="childItem.path">
                    <el-icon>
                        <Location />
                    </el-icon>
                    <span >{{childItem.title}}</span>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :index="item.path">
                <el-icon>
                    <Document />
                </el-icon>
                <span>{{ item.title }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<style lang="scss" scoped></style>
